<template>
	<view>
		<view class="content" id="screenshotArea">
			<view class="text-area" id="konvaGrapgh">
			</view>
			{{this.list}}
			<view v-for="item in list" :key="item.id" :style="{
				width: item.width + 'px',
				height: item.height + 'px',
				position:'absolute',
				top: item.y + 'px',
				left: item.x + 'px',
				zIndex: '8',
				transform: `rotate(${item.rotation}deg) scaleX(${item.scaleX}) scaleY(${item.scaleY})`,
				transformOrigin: 'left top' 
			}">
				<view v-if="item.type == 'txt'">{{item.text}}</view>
				<image class="image" :src="item.image" mode="scaleToFill"></image>
			</view>
	
			
			<!-- <view style="position: absolute;width:100px;height: 100px;z-index: 9;background: #ffc107;"></view> -->
		</view>
		
		<view class="button-area">
			<button type="primary" @click="captureScreenshot">保存图片</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<script module="konva" lang="renderjs">
	import CreateLight from "@/utils/createLight.js";
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {
				stage: null,
				layer: null,
				shapeAttrs: {},
				
				currentIndex: 0,

				list: [{
						id: 0,
						width: 200,
						height: 20,
						type: 'txt',
						x: 0,
						y: 0,
						text: '一行白鹭上青天'
					},
					{
						id: 1,
						width: 100,
						height: 100,
						type: 'img',
						image: 'https://www.nyyyds.com/pic/img/202407/20240725aaead6.png',
						x: 200,
						y: 0
					},
				]
			}
		},
		mounted() {
			const script = document.createElement("script");
			script.src = "https://unpkg.com/konva@4.0.18/konva.min.js";
			script.onload = this.initKonvas.bind(this);
			document.body.appendChild(script);
		},
		methods: {
			initKonvas() {

				var width = window.innerWidth;
				var height = window.innerHeight;

				this.stage = new Konva.Stage({
					container: 'konvaGrapgh',
					width: width,
					height: height,
				});

				this.layer = new Konva.Layer();
				this.stage.add(this.layer);

				
				// var imageObj = new Image();
				// imageObj.onload = () => {
				// 	var yoda = new Konva.Image({
				// 		x: 0,
				// 		y: 0,
				// 		image: imageObj,
				// 		width: width,
				// 		height: height
				// 	});
				
				// 	// add the shape to the layer
				// 	this.layer.add(yoda);
				// 	this.layer.batchDraw();
				// };
				// imageObj.src = '/static/logo.png';
				

				this.list.map(item => {
					let data = {
						x: item.x,
						y: item.y,
						width: item.width,
						height: item.height,
						fill: 'black',
						name: 'aaa',
						draggable: true,
						keepRatio: true,
						fontSize: 20,
						opacity: 0,
						id: item.id,
						text: item.text
					}
					let rect1 = ''
					if (item.type == 'txt') {
						rect1 = new Konva.Text(data);
					} else {
						rect1 = new Konva.Rect(data);
					}
					this.layer.add(rect1);
					this.layer.draw();
					
					rect1.on('transform', (e) => {
						this.list[this.currentIndex].rotation = rect1.rotation()
						this.list[this.currentIndex].scaleX = rect1.scaleX()
						this.list[this.currentIndex].scaleY = rect1.scaleY()
						this.list[this.currentIndex].x = rect1.x()
						this.list[this.currentIndex].y = rect1.y()
						// console.log(rect1.rotation())
					        // this.getShapeAttrs(e.target)
					        // console.log('transform');
					    });
				})

				// var rect1 = new Konva.Rect({
				// 	x: 60,
				// 	y: 60,
				// 	width: 100,
				// 	height: 90,
				// 	fill: 'red',
				// 	name: 'aaa',
				// 	draggable: true,
				// 	id: 1
				// });
				// this.layer.add(rect1);

				// var rect2 = new Konva.Rect({
				// 	x: 250,
				// 	y: 100,
				// 	width: 150,
				// 	height: 90,
				// 	fill: 'green',
				// 	name: 'rect',
				// 	draggable: true
				// });
				// this.layer.add(rect2);
				this.layer.draw();

				this.stage.on('click tap dragstart drop dragover dragmove transform wheel transformstart transformend', (e) => {
					this.getShapeAttrs(e.target)
					// if click on empty area - remove all transformers
					if (e.target === this.stage) {
						this.stage.find('Transformer').destroy();
						this.layer.draw();
						return;
					}
					// do nothing if clicked NOT on our rectangles
					if (!e.target.hasName('aaa')) {
						return;
					}
					// remove old transformers
					// TODO: we can skip it if current rect is already selected
					this.stage.find('Transformer').destroy();

					// create new transformer
					var tr = new Konva.Transformer({
						padding: 5,
						enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
					});
					this.layer.add(tr);
					tr.attachTo(e.target);
					
					this.layer.draw();
				});

				// setTimeout(() => {
				// 	this.getShapeAttrs(this.stage.findOne('.aaa'))
				// 	if (this.stage.findOne('.aaa') === this.stage) {
				// 		this.stage.find('Transformer').destroy();
				// 		this.layer.draw();
				// 		return;
				// 	}
				// 	// do nothing if clicked NOT on our rectangles
				// 	if (!e.target.hasName('aaa')) {
				// 		return;
				// 	}
				// 	// remove old transformers
				// 	// TODO: we can skip it if current rect is already selected
				// 	this.stage.find('Transformer').destroy();

				// 	// create new transformer
				// 	var tr = new Konva.Transformer();
				// 	this.layer.add(tr);
				// 	tr.attachTo(this.stage.findOne('.aaa'));
				// 	this.layer.draw();
				// }, 2000);

			},



			// 获取图形属性的方法
			getShapeAttrs(share) {
				const {
					id,
					title,
					opacity,
					fill,
					stroke,
					strokeWidth,
					fontSize,
					width,
					height,
					x,
					y,
					scaleX,
					scaleY,
					type,
					radius
				} = share.getAttrs()
				let attrs = {
					id,
					title,
					opacity,
					fill,
					stroke,
					strokeWidth,
					fontSize,
					width,
					height,
					x,
					y,
					scaleX,
					scaleY,
					type,
					radius
				}
				attrs.x = Math.round(x)
				attrs.y = Math.round(y)
				this.currentIndex = id
				this.shapeAttrs = attrs
				this.list[id] = {
					...this.list[id],
					x: x,
					y: y,
					width,
					height,
					fontSize
				}
			},

			async captureScreenshot () {
				this.stage.find('Transformer').destroy();
				this.layer.draw();
						
				const canvas = await html2canvas(document.getElementById('screenshotArea'), {
					allowTaint: true,
					useCORS: true,
				}); // 截图指定区域
				console.log(canvas)
				const link = document.createElement('a');
				link.href = canvas.toDataURL('image/png'); // 将截图转换为 png 格式的图片 URL
				link.download = 'screenshot.png';  // 下载图片，文件名为 'screenshot.png'
				link.click(); // 自动触发下载
			
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		width: 100vw;
		height: 500px;
		display: flex;
		justify-content: center;
		position: absolute;
		top: 0px;
		z-index: 10;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.image{
		width: 100%;
		height: 100%;
	}
</style>
